<template>
  <div class="card">
    <div>
      <a-select v-model="formData.search.channel_id" :allowClear="true" class="inputStyle" placeholder="请选择通道">
        <a-select-option v-for="item in planType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select :allowClear="true" class="inputStyle" placeholder="请选择银行">
        <a-select-option v-for="item in bankType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select
        v-model="formData.search.channel_type"
        :allowClear="true"
        class="inputStyle"
        @change="onChange"
        placeholder="请选择通道类型"
      >
        <a-select-option v-for="item in channelType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-button type="primary" @click="getList">查询</a-button>
      <a-button @click="reset">重置</a-button>
      <a-button type="primary" @click="sync()">同步四方(品牌)通道及费率</a-button>
      <a-button type="primary" @click="batchOpen()">批量开启</a-button>
      <a-button type="danger" @click="batchOff()">批量关闭</a-button>
    </div>
    <a-table
      :rowKey="(record, index) => index"
      :pagination="{
        pageSize: formData.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        total: total,
        current: formData.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      style="margin-top: 10px; border: 1px solid #e8e8e8"
      show-size-changer
      show-quick-jumper
      :row-selection="rowSelection"
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="trade_rate" slot-scope="text, record">
        <a-input style="width: 150px" disabled v-model="record.trade_rate"></a-input>
      </div>
      <div slot="trade_fee" slot-scope="text, record">
        <a-input style="width: 150px" disabled v-model="record.trade_fee"></a-input>
      </div>
      <div slot="income_ratio" slot-scope="text, record">
        <a-input style="width: 150px" disabled v-model="record.income_ratio"></a-input>
      </div>
      <div slot="status" slot-scope="text, record">
        <a-switch disabled :checked="record.status ? true : false" checked-children="开启" un-checked-children="关闭" />
      </div>
    </a-table>
  </div>
</template>

<script>
import { getPlanAPI } from '@/api/transaction.js'
import { getBankOptionAPI, getChannelAPI, getBrandListAPI, batchOpenAPI, syncAPI } from '@/api/channel.js'
export default {
  name: 'brandbanklist',
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },

  data() {
    return {
      loading: false,
      total: 0,
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          bank_id: undefined,
          channel_type: undefined,
          channel_id: undefined
        }
      },
      columns: [
        {
          title: '通道名称',
          dataIndex: 'channel_name',
          align: 'center'
        },
        {
          title: '通道编码',
          dataIndex: 'channel_code',
          align: 'center'
        },
        {
          title: '银行名称',
          dataIndex: 'bank_name',
          align: 'center'
        },
        {
          title: '通道类型',
          dataIndex: 'type_name',
          align: 'center'
        },
        {
          title: '路由费率',
          dataIndex: 'floor_price',
          align: 'center'
        },
        {
          title: '品牌费率',
          dataIndex: 'trade_rate',
          align: 'center',
          scopedSlots: { customRender: 'trade_rate' }
        },
        {
          title: '路由笔数费',
          dataIndex: 'floor_fee',
          align: 'center'
        },
        {
          title: '品牌笔数费',
          dataIndex: 'trade_fee',
          align: 'center',
          scopedSlots: { customRender: 'trade_fee' }
        },
        {
          title: '收益率',
          dataIndex: 'income_ratio',
          align: 'center',
          scopedSlots: { customRender: 'income_ratio' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        }
      ],
      tableData: [],
      selectedRowKeys: [],
      select_rows: [],
      planType: [],
      bankType: [],
      channelType: []
    }
  },

  created() {
    this.getType()
    this.getList()
  },
  methods: {
    reset() {
      this.formData = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          bank_id: undefined,
          channel_type: undefined,
          channel_id: undefined
        }
      }
      this.getList()
    },
    paginChange(value) {
      console.log(value)
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getList()
    },
    async getType() {
      const result = await getPlanAPI({ brand_id: process.env.VUE_APP_BRAND_ID, search: {} })
      const channel = await getChannelAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      const bank = await getBankOptionAPI({
        brand_id: process.env.VUE_APP_BRAND_ID,
        search: { channel_code: '', type: '1' }
      })
      this.planType = result.data
      this.bankType = bank.data
      this.channelType = channel.data
    },
    async getList() {
      try {
        this.loading = true
        const result = await getBrandListAPI(this.formData)
        this.tableData = result.data.list
        this.total = result.data.total
        this.selectedRowKeys = []
      } finally {
        this.loading = false
      }
    },
    async onChange() {
      const result = await getPlanAPI({
        brand_id: process.env.VUE_APP_BRAND_ID,
        search: { type: this.formData.search.channel_type }
      })
      this.planType = result.data
    },
    async batchOpen() {
      if (this.select_rows.length < 1) return this.$message.error('请先选中至少一条数据!')
      const array = this.select_rows.map(({ bank_id, channel_id }) => ({ bank_id, channel_id }))
      try {
        const result = await batchOpenAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: array, status: '1' })
        this.getList()
        this.$message.success(result.msg)
      } catch (error) {
        this.$message.success(error.data.msg)
      }
    },
    async batchOff() {
      if (this.select_rows.length < 1) return this.$message.error('请先选中至少一条数据!')
      const array = this.select_rows.map(({ bank_id, channel_id }) => ({ bank_id, channel_id }))
      try {
        const result = await batchOpenAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: array, status: '0' })
        this.getList()
        this.$message.success(result.msg)
      } catch (error) {
        this.$message.success(error.data.msg)
      }
    },
    sync() {
      this.$confirm({
        title: '确定同步品牌费率吗?',
        onOk: async () => {
          try {
            const result = await syncAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
            this.$message.success(result.msg)
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-body {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  font-size: 14px;
}

/* 整个滚动条 */
/deep/ .ant-table-body::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
.inputStyle {
  margin-right: 10px;
  width: 200px;
}
</style>
